<script setup lang="ts">
import { useComponent } from "@visual/stores";
import { ref, watch, toRaw } from "vue";
import { storeToRefs } from "pinia";
import { PxMessage } from "px-ui";

const componentStore = useComponent();
const { addEvent } = componentStore;
const { curComponent } = storeToRefs(componentStore);

const eventOptions = ref([
  { label: "组件默认点击", value: "compClick" },
  // { label: "悬浮", value: "v-hover" },
  { label: "筛选", value: "compFilter" },
  { label: "跳转", value: "compRouter" },
  { label: "提示框", value: "compDialog" }
]);
type Event = {
  event: string;
  params: { key: string; value: string }[];
};
const eventlist = ref([]);
watch(
  () => curComponent.value.id,
  (newVal, oldVal) => {
    if (newVal) {
      if (curComponent.value.events) {
        eventlist.value = JSON.parse(JSON.stringify(toRaw(curComponent.value.events)));
      } else {
        eventlist.value = [];
      }
    }
  },
  { immediate: true }
);
function addAttr(params) {
  params.push({ key: "", value: "" });
}
function addComponentEvent() {
  eventlist.value.push({
    event: "",
    params: []
  });
}
function submitComponentEvents() {
  for (let i = 0; i < eventlist.value.length; i++) {
    let item = eventlist.value[i];
    if (item.event === "") {
      PxMessage({
        message: "事件名称不能为空",
        type: "warning"
      });
      return false;
    }
  }
  addEvent(JSON.parse(JSON.stringify(toRaw(eventlist.value))));
  PxMessage({
    message: "事件保存成功",
    type: "success"
  });
}
function deleteData(params, index) {
  params.splice(index, 1);
}
function deleteEventData(index) {
  eventlist.value.splice(index, 1);
}
function getSelectDisable(value) {
  let res = eventlist.value.some((item: { id: string; event: string; params: any[] }) => item.event === value);
  if (res === true) console.log(res);
  return res;
}
</script>
<template>
  <px-form class="eventlist-container mt-[14px]">
    <div v-for="(item, index) in eventlist" :key="index" class="eventlist-component">
      <div class="div-guanbi" @click="deleteEventData(index)">
        <span class="iconfont icon-guanbi" />
      </div>
      <px-select v-model="item.event" placeholder="请选择事件名称">
        <px-option v-for="e in eventOptions" :key="e.value" :value="e.value" :label="e.label" :disabled="getSelectDisable(e.value)" />
      </px-select>

      <p>事件触发时，当前组件要传递的参数</p>
      <div v-for="(e, i) in item.params" :key="i" class="attr-container">
        <px-input v-model="e.key" placeholder="请输入key" />

        <px-input v-model.number="e.value" placeholder="请输入value" />
        <span class="iconfont icon-shanchu" @click="deleteData(item.params, i)" />
      </div>
      <px-button style="margin-top: 10px" @click="addAttr(item.params)">添加属性</px-button>
    </div>
    <px-button style="margin-bottom: 10px" @click="addComponentEvent">添加事件</px-button>
    <px-button style="margin-bottom: 10px" @click="submitComponentEvents">确认</px-button>
  </px-form>
</template>

<style lang="scss" scoped>
.eventlist-container {
  padding-right: 14px;
  padding-left: 10px;

  .eventlist-component {
    position: relative;
    padding: 10px;
    padding-top: 24px;
    margin: 10px 0;
    border: 1px solid #ddd;

    .div-guanbi {
      position: absolute;
      top: 3px;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      color: #888;
      cursor: pointer;
      border: 1px solid #ddd;
      border-radius: 50%;

      .iconfont {
        font-size: 12px;
      }
    }
  }

  .px-select {
    margin-bottom: 10px;
  }

  .attr-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;

    .px-select {
      margin-bottom: 0;
    }

    & > div {
      width: 97px !important;
    }

    .icon-shanchu {
      cursor: pointer;
    }
  }
}
</style>
